/* Hide / Show tab's content  */

.tab-content {
    display: none;
    width: 100%;
    max-height: 100%;
    background: #fff;
    padding: auto 0;
  }
  .tab.active + .tab-content { display: block; transition: .5s;}
  
  /* Styling tabs - this is enough for mobile - just like an accordion */
  
  /* .tab, .tab-content { padding: 10px !important; }  */
.tab { 
    background: #f3942e; margin-bottom: 2px !important;
    border: 1px solid #f3942e !important; border-left: 5px solid #f3942e !important;
    color: #000!important;
    height: 50px;  
}
.tab .active .btn { 
    background: #fff!important;  
}
.tab .btn, .tab i {
    height: 100% !important;
    line-height: 1.0rem !important;
}
.tab-content { background: #fff;  padding: 10px !important;
    border: 2px solid #f3942e !important;}
.tab > a {
    text-align: left !important; 
    font-weight: bolder; 
    text-transform: uppercase !important; 
    font-size: 11px !important; 
    width: 100% !important;
}
.tab > a:hover, .tab > a:focus,.tab.active >a  {color: #000!important; background: #fff!important; }
.tab-content > .table {
  max-height: 500px;
  overflow-y: auto;
}
  
  /* Styling for desktop - vertical tabs */
  
  @media (min-width: 992px) {
    .tab { width: 20%; text-align: left !important; }
    .tab > a {text-align: left !important; }
    .tab-content {
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      min-height: 100%;
      overflow-y: auto;
    }
  /*   this is optional */
    .tabs-container { 
        /* width: 100%; */
      min-height: 600px; 
      background: #fff;
    }
  }
  /*  */